<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>admin</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="css/fontastic.css">
  <!-- main-->
  <link rel="stylesheet" href="css/main.css">
  <!-- Google fonts - Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <!-- jQuery Circle-->
  <link rel="stylesheet" href="css/grasp_mobile_progress_circle-1.0.0.min.css">
  <!-- Custom Scrollbar-->
  <link rel="stylesheet" href="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="img/favicon.ico">
  <!-- Tweaks for older IEs-->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  <style>
    #upload_main_right,
    #upload_main_left {
      margin-top: 30px;
      padding: 30px;
    }

    #upload_main_right {
      min-height: 300px;
      color: #fff;
      display: block;
      margin-top: 0;
    }

    #upload_main_left>p {
      padding: 10px;
      margin: 0;
    }
  </style>
</head>

<body>
  <!-- Side Navbar -->
  <nav class="side-navbar">
    <div class="side-navbar-wrapper">
      <!-- Sidebar Header    -->
      <div class="sidenav-header d-flex align-items-center justify-content-center">
        <!-- User Info-->
        <div class="sidenav-header-inner text-center"><img src="img/avatar-7.jpg" alt="person"
            class="img-fluid rounded-circle">
          <h2 class="h5">测试用户</h2><span>测试用户</span>
        </div>
        <!-- Small Brand information, appears on minimized sidebar-->
        <div class="sidenav-header-logo"><a href="index.html" class="brand-small text-center"> <strong>B</strong><strong
              class="text-primary">D</strong></a></div>
      </div>
      <!-- Sidebar Navigation Menus-->
      <div class="main-menu">
        <h5 class="sidenav-heading">Main</h5>
        <ul id="side-main-menu" class="side-menu list-unstyled">
          <li><a href="index.html"> <i class="icon-home"></i>训练场 </a></li>
          <li><a href="blog.html"> <i class="icon-form"></i>Wiki </a></li>
        </ul>
      </div>
      <!-- <div class="admin-menu">
          <h5 class="sidenav-heading">Second menu</h5>
          <ul id="side-admin-menu" class="side-menu list-unstyled"> 
            <li> <a href="#"> <i class="icon-screen"> </i>Demo</a></li>
            <li> <a href="#"> <i class="icon-flask"> </i>Demo
                <div class="badge badge-info">Special</div></a></li>
            <li> <a href=""> <i class="icon-flask"> </i>Demo</a></li>
            <li> <a href=""> <i class="icon-picture"> </i>Demo</a></li>
          </ul>
        </div> -->
    </div>
  </nav>
  <div class="page">
    <!-- navbar-->
    <header class="header">
      <nav class="navbar">
        <div class="container-fluid">
          <div class="navbar-holder d-flex align-items-center justify-content-between">
            <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a
                href="index.html" class="navbar-brand">
                <div class="brand-text d-none d-md-inline-block"><span>简树控制台</span></div>
              </a></div>
            <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
              <!-- Log out-->
              <li class="nav-item"><a href="../index.html" class="nav-link logout"> <span
                    class="d-none d-sm-inline-block">Logout</span><i class="fa fa-sign-out"></i></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!-- main section -->
    <section class="upload_main container">

      <!-- 消息框 -->
      <div class="modal" tabindex="-1" role="dialog" id="alert_boot">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">提示</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>请检查信息是否完整！</p>
            </div>
          </div>
        </div>
      </div>


      <div class="row">
        <div class="col-md-6" id="upload_main_left" style="margin: 0 auto;">
          <p id="customFile_info">请上传数据源</p>
          <div class="custom-file">
            <input type="file" class="custom-file-input" id="customFile">
            <label class="custom-file-label" for="customFile" id="select_name">选择文件</label>
          </div>
          <p id="select_info">选择模型</p>
          <div class="form-group">
            <select class="form-control" id="exampleFormControlSelect1">
              <option>请选模型</opStion>
              <option value="scoreWaraning">成绩预警模型(随机森林)</opStion>
              <option disabled>随机森林</opStion>
              <option disabled>K近邻</option>
              <option disabled>逻辑回归</option>
            </select>
          </div>
          <br>
          <button class="btn btn-danger" id="play_run_btn">开始训练</button>

        </div>
        <div class="col-md-12" id="upload_main_right" style="display: none;">
          <table class="table table-striped" id="failureTable">
            <caption style="text-align: center;caption-side: top;font: 16px;font-weight: 700;">可能挂科人员</caption>
            <thead>
              <tr>
                <th>学号</th>
                <th>姓名</th>
              </tr>
            </thead>
            <tbody id="tBody">

            </tbody>
          </table>
        </div>
      </div>
      <script>
        var play_run_btn = document.getElementById('play_run_btn');
        var upload_main_right = document.getElementById('upload_main_right');
        var mx = document.getElementById('exampleFormControlSelect1');
        var select_info = document.getElementById('select_info');
        var customFile = document.getElementById('customFile');
        var customFile_info = document.getElementById('customFile_info');
        var select_name = document.getElementById('select_name');
        var alert_boot = document.getElementById('alert_boot');
        var close = document.getElementById('close');

        // window.onclick=function(){
        //   // upload_main_right.style.display='none';
        //   if(mx.value!='请选择模型'){
        //       select_info.style.color='#333';
        //     }else{
        //       select_info.style.color='brown';
        //     }
        //   if(customFile.value==''){
        //       customFile_info.style.color='brown'
        //     }else{
        //       customFile_info.style.color='#333';
        //     }
        // }

        play_run_btn.onclick = function () {
          // if(upload_main_right.style.display=='none'){
          //     upload_main_right.style.display='block';
          //   }

          if (customFile.value == '' || mx.value == '请选模型') {
            alert_boot.style.display = 'block';
            return false
          }
        }

        close.onclick = function () {
          alert_boot.style.display = 'none';
        }
        window.onclick = function () {
          if (customFile.value == '') {
            select_name.innerText = '选择文件';
          } else {
            select_name.innerText = customFile.value;
          }
        }


      </script>
    </section>
  </div>
  <!-- JavaScript files-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/popper.js/umd/popper.min.js"> </script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="js/grasp_mobile_progress_circle-1.0.0.min.js"></script>
  <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
  <script src="vendor/chart.js/Chart.min.js"></script>
  <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
  <script src="vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="js/charts-home.js"></script>
  <!-- Main File-->
  <script src="js/front.js"></script>
  <script src="./js/main.js"></script>
</body>

</html>